<template>
    <div class="ee">
        <p class="h">about</p>
        <span class="g">银河系</span>
    </div>
    <div class="ad">
        <div class="b"></div>
            <div class="c"></div>

        <div class="description">
        
            <p class="f">银河系</p>
            <div class="d">&nbsp;&nbsp;银河系，这个璀璨夺目的星系，宛如一个巨大的旋转盘，横亘在浩瀚的宇宙中。它得名于其在夜空中呈现出的那条朦胧的银白色光带，那是无数恒星的光芒交织而成的壮丽景象。

                银河系是一个典型的旋涡星系，呈椭圆盘形，具有巨大的盘面结构。它的直径估计为10万光年，中心厚度约为1.2万光年，而边缘则逐渐稀薄。银河系自内向外分别由银心、银核、银盘、银晕和银冕组成。在银河系中央，有一个名为人马座A*的超大黑洞，它强大的引力牵引着整个星系旋转。

                银河系中包含的恒星数量难以计数，估计在1000亿到4000亿之间。这些恒星按照其光谱特性被分为不同的类型，如O型、B型、A型、F型、G型、K型和M型等。其中，我们的太阳就是一颗G型恒星。除了恒星，银河系中还有大量的行星、小行星、彗星、流星体、星际物质以及神秘的黑洞和中子星等天体。

                在银河系中，还有许多引人注目的天体现象。例如，超新星爆发是恒星演化过程中的一种壮观事件，当恒星耗尽其核燃料时，会发生剧烈的爆炸，释放出巨大的能量。此外，银河系中还存在许多行星系和卫星系，它们围绕着恒星运转，共同构成了丰富多彩的星系生态。

                科学家们对银河系的研究已经取得了许多重要成果。通过观测和研究恒星的运动和分布，我们可以更深入地了解银河系的结构和演化历史。同时，对银河系中天体的化学组成、物理性质以及它们之间的相互作用等方面的研究，也有助于我们揭示宇宙的奥秘。

                银河系不仅是我们所在的家园，更是天文学家们探索宇宙奥秘的重要实验室。随着科学技术的不断进步，我们对银河系的了解将会越来越深入，而这一切都将为我们揭示更多关于宇宙的神奇和美丽。

            </div>
        </div>
        <div class="d"></div>
    </div>
    <div class="e">
        <p class="h">about</p>
        <span class="g">太阳系</span>
    </div>
    <div class="ad">
        <div class="lol"></div>
        <div class="gog"></div>
        <div class="descriptions">
            <p class="f">太阳系</p>
            <div class="m">
                &nbsp;&nbsp;太阳系是一个由太阳、八大行星、小行星、流星、彗星、外海王星天体以及星际尘埃等构成的天体系统，它位于银河系的一个旋臂上，距离银河系中心约30000光年，在银河系中的位置相对固定。太阳系的中心是太阳，它提供了太阳系内所有行星和其他天体运动和存在的能量。

                太阳系的八大行星按离太阳从近到远的顺序依次为水星、金星、地球、火星、木星、土星、天王星和海王星。它们各自沿着不同的椭圆形轨道绕太阳旋转，同时自身也进行自转。此外，太阳系中还有许多小行星、流星体、彗星、尘埃和气体等组成的行星际物质，它们受到太阳的引力影响而围绕着太阳运动。

                太阳是太阳系中最重要的组成部分，它是一个巨大的气体星球，主要由氢和氦组成，直径为139.2万公里，质量是地球的33万倍。太阳现在正处于主序阶段，并通过核聚变反应释放出光和热，为太阳系中的行星和其他天体提供能量。

                太阳系的形成据信始于46亿年前一个巨大的分子云的引力坍缩。这个坍缩过程中，大部分气体和尘埃聚集形成了太阳，而其余的物质则形成了行星、小行星、流星体、彗星等天体。太阳系的演化历程非常复杂，其中包括行星的形成、撞击和演化等过程。

                总的来说，太阳系是一个庞大而复杂的系统，其中包含着许多神秘和未知的事物。科学家们一直在不断地研究和探索太阳系的奥秘，以期更好地理解宇宙的起源和演化。

            </div>
        </div>
    </div>
    <div class="t">
        <p class="h">about</p>
        <span class="l">宇宙图片欣赏</span>
    </div>
    <div class="card-container">
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/04/hubble-34th-littledumbell-sm-stsci-01htddrc7nr68q120setwhmsaq.webp"
                title="哈勃望远镜观测小哑铃星云庆祝34周年" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/gsfc-20171208-archive-e001885orig.webp"
                title="NASA的哈勃望远镜用“星系玫瑰”庆祝21周年" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/SquidOu4_Linde_4010.jpg"
                title="Ou4: 巨乌贼星云" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/HaLRGBv2Pugh.jpg"
                title="RCW 85" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/RhoAntares_Stocks_2560.jpg"
                title="心宿增四附近的色彩缤纷恒星与云气" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/DolphinNebulaHOO_2048.jpg"
                title="SH2-308: 海豚头星云" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/278_lorand_fenyes_ngc4565.jpg"
                title="NGC 4565: 侧向星系" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/06/NGC2403-LRGBHaOiii-v25-f.jpg"
                title="鹿豹座星系NGC 2403" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/AR3664Prom_Voltmer_1728.jpg"
                title="太阳边缘的AR 3664" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/AuroraStartrails_chiragupreti.jpg"
                title="北天的极光" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/Cg4Galaxy_CtioRector_1476.jpg"
                title="CG4: 云球与星系" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/AuroraWisconsin_Liu_6000.jpg"
                title="有圆顶状极光的天空" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/iss059e019043.jpg"
                title="从太空俯视马尼夸根陨撞击坑" />
        </div>
        <div class="card-wrapper">
            <Card
                image="https://www.nasachina.cn/wp-content/uploads/2024/05/NebulousRealmofWR134_2048.png"
                title="WR 134周围的星云" />
        </div>
    </div>
</template>
<script>
import Card from './Card.vue';

export default {
    name: 'ParentComponent',
    components: {
        Card,

    },
}

</script>
<style>

.ad {

    width: 90%;
    height: 400px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: #C7EDCC;
    position: relative;
    transition: all 0.5s ease;

}

.ad:hover {
    box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.5);
}

.b {
    width: 250px;
    height: 200px;
    border-radius: 25px;
    background: url('https://ts1.cn.mm.bing.net/th/id/R-C.147ba66331b08441a32c87a83358a5b5?rik=HjeMxaAnY1CbRA&riu=http%3a%2f%2fdownload1.eduyun.cn%2fresource%2f0406%2f104%2fj_kx%2f3x%2f10%2f10_02%2f10_02_mt%2fimage%2fjkx3x100208016.jpg&ehk=C4a3pauUQtz7zZ%2fw1UDunoI0zKyTxSE3KRUyENIern4%3d&risl=&pid=ImgRaw&r=0');
    background-size: 100% 100%;
    /* 或者使用 'cover' 或 'contain' */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    position: absolute;
    top: 30px;
    left: 30px;
    
}

.c {
    width: 240px;
    height: 200px;
    border-radius: 25px;
    background: url('https://ts1.cn.mm.bing.net/th/id/R-C.7a29a1f10af22f7901c9f1c44a34165a?rik=kZp2CNawEqrxZg&riu=http%3a%2f%2fwww.10wallpaper.com%2fwallpaper%2f2560x1600%2f1204%2fmilky_way-Magical_space_photography_wallpaper_2560x1600.jpg&ehk=JCfYkqcXtRSqhkSgw8uB0gOcdfmGQUtzKDYWU2lRE3w%3d&risl=&pid=ImgRaw&r=0');
    background-size: 100% 100%;
    /* 或者使用 'cover' 或 'contain' */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    position: absolute;
    top: 150px;
    left: 190px;
}

.description {
    position: absolute;
    /* color: black;
    font-size: 25px;
    font-weight: bold; */
    right: 60px;
    /* 距离容器右侧的距离 */
    top: 5px;
    /* 距离容器顶部的距离，可以根据需要调整 */
    width: 800px;
    /* 文字介绍的宽度，可以根据需要调整 */
}

p {
    color: black;
    font-size: 25px;
    font-weight: bold;
}

.d {
    color: black;
    font-family: SimSun;
    position: relative;
}

span {
    color: black;
    font-size: 30px;
    font-weight: bold;
    font-family: SimSun;

}

.e {
    margin-top: 50px;
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;

}

.h {
    order: 1;
    position: absolute;
    left: 46%;
    color: red;
    font-size: 15px;
}

.g {
    top: 50px;
    order: 2;
    position: absolute;
    left: 45%;
    font-weight: bold;

}

.ee {
    margin-top: 50px;
    width: 100%;
    height: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.lol {
    width: 250px;
    height: 200px;
    border-radius: 25px;
    background: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.RKmWK21gFjRhERJqhQtwdQHaEm?rs=1&pid=ImgDetMain');
    background-size: 100% 100%;
    /* 或者使用 'cover' 或 'contain' */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    position: absolute;
    top: 30px;
    left: 30px;

}

.gog {
    width: 260px;
    height: 200px;
    border-radius: 25px;
    background: url('https://img3.redocn.com/tupian/20150907/taiyangxiweizhitu_3912666.jpg');
    background-size: 100% 100%;
    /* 或者使用 'cover' 或 'contain' */
    background-repeat: no-repeat;
    /* 防止图片重复 */
    position: absolute;
    top: 150px;
    left: 190px;

}

.m {
    color: black;
    font-family: SimSun;
    position: absolute;
}

.descriptions {
    position: absolute;
    /* color: black;
    font-size: 25px;
    font-weight: bold; */
    right: 60px;
    /* 距离容器右侧的距离 */
    top: 5px;
    /* 距离容器顶部的距离，可以根据需要调整 */
    width: 750px;
    height: auto;
}

.t {
    margin-top: 50px;
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.l {
    top: 50px;
    order: 2;
    position: absolute;
    left: 45%;
    font-weight: bold;
}
.card-containers {  
    position: relative;
    left: 100px;
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between; /* 或者使用 space-between、space-around 等值来调整卡片之间的空间 */  
}  
  
.card-wrapper {  
    flex: 0 0 calc(50% - 10px); /* 假设卡片之间要有10px的间隙 */  
    margin: 5px; /* 这样就创建了10px的间隙 */  
    box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度 */  
}  
  
/* 可选：如果你想要在小屏幕上也能正确显示，可以添加媒体查询 */  
@media (max-width: 768px) {  
    .card-wrapper {  
        flex: 0 0 100%; /* 在小屏幕上，每个卡片占满一整行 */  
    }  
}
</style>